<template>
    <div style="width:140px;height: 320px;overflow: auto;">
        <el-checkbox-group v-model="checkList"  @change="checkButton">
            <el-checkbox v-for="(item,index) in data" :label="item.id">
                {{item.name}}
                <!--<el-input placeholder="设置别名" v-model="item.name"></el-input>-->
            </el-checkbox>
        </el-checkbox-group>
        <el-table :data="data" border style="width: 100%" @selection-change="selectedRow">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="日期" width="120">
                <template scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column label="别名" width="120">               
                <template scope="scope">
                    <el-button v-show="!aliasState" size="small" @click="SetbuttonAlias(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-input v-show="aliasState">{{ scope.row.buttonAlias }}</el-input>
                </template>
            </el-table-column>
        </el-table>
        
    </div>
</template>
<script>
const cityOptions = ['上海sdfadsf', '北京', '广州', '深圳'];
    export default{
        data(){
            return{
                //数据配置
                data:[],
                checkList:[],
                checkedCities1: ['上海', '北京'],
                cities: cityOptions,
                selectRow:null,
                aliasState:false,
            }
        },
        mounted()
        {
            //debugger;
            //初始化加载
            this.ajax({
            url: 'SystemButton/GetAllList',
            success: function(data) {
                debugger;
                this.data = data;
                // if (this.editData != null) {
                //     this.data = this.editData;
                // } else {
                //     this.data = JSON.parse(JSON.stringify(this.initData));
                // }
            }
            });
        },
        props:['menuId'],
        methods:{
            //方法
            checkButton:function(event)
            {
                this.checkList=event;
            },
            selectedRow(val) {
                //选择按钮
                this.selectRow = val;
            },
            SetbuttonAlias(index,row)
            {
                //设置别名
                this.aliasState=true;
            },
        },
        watch:{
        }
    }
</script>
<style>
    .el-checkbox{
        margin-left:15px;
    }
    .el-tooltip__popper{
        display: none;
    }
    .el-button--small{
        padding:5px 9px;
    }
</style>
